<template>
  <el-row>
    <el-col class="title">个人信息</el-col>
    <el-col class="infoCenter">
      <el-form>
        <el-form-item label="用户名：" label-width="15%">
          <el-input v-model="userInfo.username" placeholder="请输入用户名" style="width: 500px;" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" label-width="15%">
          <el-input v-model="userInfo.realname" placeholder="请输入真实姓名" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="选择性别：" label-width="15%">
          <el-radio-group v-model="userInfo.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证：" label-width="15%">
          <el-input v-model="userInfo.idCard" placeholder="请输入身份证" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" label-width="15%">
          <el-input v-model="userInfo.phone" placeholder="请输手机号" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" label-width="15%">
          <el-input v-model="userInfo.email" placeholder="请输入邮箱" style="width: 500px;"></el-input>
        </el-form-item>
      </el-form>
      <div class="infoTitle">
        <el-button type="primary" @click="update">确定</el-button>
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
import {useUserStore} from "@/stores/user.js";
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";


const userStore = useUserStore();
//存储用户信息的变量
const userInfo = ref({})

const getUserInfo = ()=> {
  userInfo.value = userStore.userInfo
}
//修改用户信息
const update = () => {
  userApi.update(userInfo.value)
      .then(resp => {
        if (resp.code == 10000) {
          //将修改完成的信息塞入userStore
          userStore.updateUser(userInfo.value);
          //刷新界面
          getUserInfo();
          ElMessage.success(resp.msg)
        }else {
          ElMessage.error(resp.msg)
        }
      })
}

getUserInfo();
</script>

<style scoped>
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .infoCenter {
    background-color: #ffffff;
    padding: 20px;
  }
  .infoTitle {
    text-align: right;
  }
</style>